<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>个人中心</title>
    <link rel="stylesheet" href="${base}/static/css/mui.css" />
    <link rel="stylesheet" href="${base}/static/css/font/iconfont.css" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <style type="text/css">
        .logo-box {
            padding: 0 15px;
            background: #f5f5f5;
            text-align: center;
            width: 100%;
            border-bottom: 1px solid #cccccc;
        }

        .logo-box>img {
            width: auto;
            max-width: 100%;
            height: 36px;
            margin: 1px auto;
            vertical-align: middle;
        }

        .logo-box>span {
            color: #22add6;
            font-size: 15px;
        }

        .user-info-box {
            padding: 5px auto;
            background: url(${base}/static/img/e_02.png);
            background-size: 100% 100%;
            width: 100%;
            height: 140px;
        }

        .user-head-img {
            float: left;
            width: 40%;
            margin: 8px 0 5px 20px;
            text-align: right;
        }

        .user-head-img>img {
            width: 100px;
            border-radius: 50%;
            margin: 2px 10px;
            border: 4px solid #fff;
        }

        .user-name {
            float: left;
            width: 40%;
            margin: 28px auto;
            text-align: left;
        }

        .user-name>h4 {
            font-weight: normal;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 30px;
        }

        .user-name>p {
            line-height: 20px;
            font-size: 14px;
            width: 45px;
            height: 21px;
            text-align: center;
            color: #fff;
            border: 1px solid #fff;
            margin: 0 8px;
        }

        .center-alloder {
            padding: 0;
            font-size: 14px;
            color: #333;
        }

        .center-list-icon {
            width: 20px;
            height: auto;
        }

        .wy-cell {
            display: flex;
        }

        .center-list-txt {
            font-size: 14px;
            color: #333;
            line-height: 16px;
        }

        .ord-status-txt-ts {
            font-size: 13px;
            color: #ee7800;
        }

        .fr {
            float: right;
        }

        .fl {
            float: left;
        }

        .wy-pro-pri em {
            font-weight: bold;
            margin-left: 2px;
        }

        .wy-pro-pri {
            color: #e21323;
            font-size: 10px;
            margin-top: 3px;
            line-height: 20px;
        }

        .ord-pro-link {
            font-size: 14px;
            font-weight: normal;
            color: #232323;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            word-wrap: break-word;
            word-break: break-all;
            line-height: 1.8;
            display: block;
        }

        .wy-pro-pri .ord-pri {
            padding: 0 0 5px 0;
        }

        .font-13 {
            font-size: 13px;
        }

        .font-15 {
            font-size: 15px;
        }

        .num {
            font-family: Arial, Helvetica, sans-serif;
        }

        .weui-cell.oder-opt-btnbox {
            display: block;
            text-align: right;
        }

        .pd-10 {
            padding: 10px;
        }

        .pro-amount span.font-13 {
            line-height: 24px;
            padding-right: 10px;
        }
        .ords-btn {
            display: inline-block;
            margin-left: 10px;
            padding: 2px 15px;
            font-size: 14px;
        }
        .ords-btn-dele {
            border: 1px solid #333;
            border-radius: 3px;
            color: #333;
        }
        .ords-btn-com {
            border: 1px solid #e07100;
            border-radius: 3px;
            color: #e07100;
        }
        .ords-btn-pay {
            border: 1px solid #09bb07;
            border-radius: 3px;
            color: #04be02;
        }

        .ord-pro-list {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #ededed;
        }

        .personal-box {
            display: none;
        }

        .personal {
            width: 100%;
            margin-top: 10px;
            height: auto;
            padding: 10px;
            background: #fff;
        }

        .personal p {
            margin-top: 0px;
            margin-bottom: 0px;
            line-height: 40px;
            font-size: 15px;
            border-top: 1px solid #e6e6e6;
            height: 40px;
        }

        .personal p:nth-child(1) {
            border: none;
        }

        .personal p span:nth-child(1) {
            color: #333333;
            float: left;
        }

        .personal p span:nth-child(2) {
            color: #999999;
            float: right;
        }

        .personal-box button {
            display: block;
            margin: 10px auto 10px auto;
            width: 98%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #fff;
            background: #ff9147;
            border-radius: 12px;
            border: none;
            font-size: 16px;
            padding: 0;
        }

        .personal-box button:active {
            color: #fff;
            background: #ff9147;
        }

        .footer-tab-nav {
            min-width: 320px;
            max-width: 560px;
            margin: 0 auto;
            background: #fff;
            height: 30px;
            border-top: 1px solid #cccccc;
        }

        .footer-tab-nav span {
            font-size: 26px;
        }

        .mui-tab-item span:nth-child(2) {
            font-size: 11px;
            margin: 3px;
        }

        img.weui-media-box__thumb {
            width: 60px;
            height: 60px;
        }
    </style>
</head>

<body ontouchstart>
<div class="mui-content">
    <!--
        Logo box
    -->
    <div class="logo-box">
        <img src="http://all.ihealthway.com${base}/static/img/logo_04.png" />
        <span>健维商城</span>
    </div>
    <!--
        User head image
    -->
    <div class="user-info-box">
        <div class="user-head-img">
            <img src="${user.headImg}" alt="">
        </div>
        <div class="user-name">
            <h4>${user.nickName}</h4>
            <p id="userCompleteInfo">更多</p>
        </div>
    </div>
    <div id="order_gift_area">
        <!--
            Order list
        -->
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">
            <a href="all_orders.html" class="weui-cell weui-cell_access center-alloder">
                <div class="weui-cell__bd wy-cell">
                    <div class="weui-cell__hd"><img src="http://www.erdangjiade.com/modals/10/1005/demo/images/center-icon-order-all.png" alt="" class="center-list-icon"></div>
                    <div class="weui-cell__bd weui-cell_primary">
                        <p class="center-list-txt">订单信息</p>
                    </div>
                </div>
                <span class="weui-cell__ft"></span>
            </a>
        </div>
        <div class="weui-panel__bd">
            <% for (ol in orderList) { %>
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd"><span>订单号：${ol.orderId}</span><span class="ord-status-txt-ts fr">${ol.createTime, 'yyyy-MM-dd'}</span></div>
                <div class="weui-media-box__bd  pd-10">
                    <div class="weui-media-box_appmsg ord-pro-list">
                        <div class="weui-media-box__hd">
                            <a href="#"><img class="weui-media-box__thumb" src="${ol.goodsImgUrl}" alt="${ol.goodsName}"></a>
                        </div>
                        <div class="weui-media-box__bd">
                            <h1 class="weui-media-box__desc">
                                <a href="pro_info.html" class="ord-pro-link">${ol.goodsName}</a>
                            </h1>

                            <div class="clear mg-t-10">
                                <div class="wy-pro-pri fl">¥<em class="num font-15">${ol.goodsPrice/100}</em></div>
                                <div class="pro-amount fr"><span class="font-13">团购人数: <em class="name">${ol.goodsSales}</em></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="weui-panel__ft">
                    <div class="weui-cell weui-cell_access weui-cell_link oder-opt-btnbox">
                        <!--<a href="javascript:;" class="ords-btn-dele">删除订单</a>-->
                        <%
                            if(ol.dataStatus == "1"){
                        %>
                        <a href="javascript:goToPay('${ol.orderId}','${ol.goodsId}')" class="ords-btn ords-btn-pay">微信支付</a>
                        <%
                        } else if(ol.dataStatus == "3") {
                        %>
                        <a href="#" class="ords-btn ords-btn-dele">订单已关闭</a>
                        <% } else if(ol.dataStatus == "4") {%>
                        <a href="#" class="ords-btn ords-btn-dele">退款申请中</a>
                        <% } else if(ol.dataStatus == "5") {%>
                        <a href="#" class="ords-btn ords-btn-dele">退款完成</a>
                        <% } else {%>
                        <a href="#" class="ords-btn ords-btn-dele">已完成</a>
                        <a href="javascript:goToRefund()" class="ords-btn ords-btn-com">申请退款</a>
                        <% } %>
                    </div>
                </div>
            </div>
            <% } elsefor{ %>
            <div class="orderbox1">
                <button>去商城转转</button>
            </div>
            <% } %>
        </div>
    </div>

    <!--
         Prize list
     -->
    <div class="weui-panel weui-panel_access">
        <div class="weui-panel__hd">
            <a href="all_orders.html" class="weui-cell weui-cell_access center-alloder">
                <div class="weui-cell__bd wy-cell">
                    <div class="weui-cell__hd"><img src="${base}/static/img/prize.png" alt="" class="center-list-icon"></div>
                    <div class="weui-cell__bd weui-cell_primary">
                        <p class="center-list-txt">奖品信息</p>
                    </div>
                </div>
                <span class="weui-cell__ft"></span>
            </a>
        </div>
        <div class="weui-panel__bd">
            <%for (wl in rewardList) {%>
            <div class="weui-panel weui-panel_access">
                <div class="weui-panel__hd">
                    <span>中奖时间：${wl.winTime, 'yyyy-MM-dd HH:mm:ss'}</span>
                    <span class="ord-status-txt-ts fr">待审核</span>
                </div>
                <div class="weui-media-box__bd  pd-10">
                    <div class="weui-media-box_appmsg ord-pro-list">
                        <div class="weui-media-box__hd">
                            <a href="#">
                                <img class="weui-media-box__thumb" src="${wl.rewardImg}" alt="">
                            </a>
                        </div>
                        <div class="weui-media-box__bd">
                            <h1 class="weui-media-box__desc">
                                <a href="#" class="ord-pro-link">${wl.rewardName}</a>
                            </h1>

                            <div class="clear mg-t-10">
                                <div class="wy-pro-pri fl">¥<em class="num font-15">${wl.rewardPrice/100}</em></div>
                                <div class="pro-amount fr"><span class="font-13">数量×<em class="name">1</em></span></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <%}elsefor{ %>
            <div>
                暂未找到记录
            </div>
            <% } %>
        </div>
    </div>
    </div>
    <div id="personal-info-box" class="personal-box">
        <div class="personal clear-fix">
            <p><span>昵称</span><span>${user.nickName}</span></p>
            <p><span>真实姓名</span><span>${user.realName}</span></p>
            <p><span>性别</span><span>${user.sex==1?"男":"女"}${user.sex==0?"未知":""}</span></p>
            <p><span>生日</span><span>${user.birthday}</span></p>
            <p><span>单位</span><span>${user.companyName}</span></p>
            <p><span>手机</span><span>${user.phone}</span></p>
            <p><span>家乡</span><span>${user.country}->${user.province}->${user.city}</span></p>
            <p><span>加入时间</span><span>${user.followTime, "yyyy-MM-dd HH:mm:ss"}</span></p>
        </div>
        <button id="closePreview">关闭</button>
    </div>
    <div style="height: 50px;"></div>
    <!--
    Nav bottom banner
    -->
    <div class="mui-row">
        <nav id="bottomNav" class="mui-bar mui-bar-tab footer-tab-nav">
            <a class="mui-tab-item">
                <span class="mui-icon"><i class="icons-font icon-shop"></i></span>
                <span class="mui-tab-label">商城首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon"><i class="icons-font icon-classify"></i></span>
                <span class="mui-tab-label">产品分类</span>
            </a>
            <a class="mui-tab-item mui-active">
                <span class="mui-icon"><i class="icons-font icon-personal"></i></span>
                <span class="mui-tab-label">个人中心</span>
            </a>
        </nav>
    </div>
</div>

<script src="${base}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/static/js/mui.js"></script>
<script type="text/javascript" src="${base}/static/js/shop_commons.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#userCompleteInfo, #closePreview').bind('click', function () {
            toggleShow();
        });
    });

    function toggleShow() {
        $('#order_gift_area').toggle('slow');
        $('#personal-info-box').toggle('slow');
    }

    function goToPay(orderId,goodsId) {
        var payUrl = '${base}/wechat/prepareOrderPay.do?openId=${user.openId}&orderNo='+orderId+'&goodsId='+goodsId;
        window.location.href = payUrl;
    }

    function goToRefund() {
        mui.alert('正在开发中...');
    }
</script>
</body>

</html>